import React, { Component } from 'react'
import { Card,Button,Input,Table,Select, message } from 'antd'
import { PlusOutlined,ArrowRightOutlined } from '@ant-design/icons'
import LinkButton from '@/components/link-button'
import {reqProducts, searchProducts, reqUpdateStatus} from '@api/product'
import {PAGE_SIZE} from '@/utils/constant'
export default class home extends Component {
    state={
        total:0,
        loading:false,
        searchContent:'',
        searchType:'productName',
        products: [
            {"status":2,"imgs":["image-1611824192824.svg"],"_id":"60121ccaa88120776be807c7","pCategoryId":"0","categoryId":"5fed9c37cc325b1aceb36204","name":"柯基","desc":"爱宠","price":10,"__v":0,"detail":"<p>宠物😀</p>\n"},
            {"status":1,"imgs":["image-1612230220613.png"],"_id":"6018ae6634c1ad21f1c45f2a","name":"飞机","desc":"空中无敌","price":11000,"detail":"<p style=\"text-align:center;\"><strong>你好，飞机</strong></p>\n","pCategoryId":"5fe5c9adcc325b1aceb361f2","categoryId":"5ffc149fa4aca2121c004691","__v":0},
            {"status":1,"imgs":["image-1612668587229.jpg"],"_id":"601f5d6a34c1ad21f1c45f9f","name":"吉祥三宝","desc":"cyj-test","price":666,"detail":"<p>aaa</p>\n","pCategoryId":"5fe500cecc325b1aceb361ef","categoryId":"5fe500d5cc325b1aceb361f0","__v":0},
            ],
    }

    initColumns=()=>{
        // 初始化行头
        this.columns = [
            {
                title: '商品名称',
                dataIndex: 'name',
                key: 'name',
            },
            {
                title: '商品描述',
                dataIndex: 'desc',
                key: 'desc',
              },
              {
                title: '价格',
                dataIndex: 'price',
                key: 'price',
                render:(price)=>'￥'+price //传入对应属性值，指定了后重新渲染
              },
              {
                title: '状态',
                // dataIndex: 'status',
                width:200,
                key: 'status',
                render:(product)=>{const {_id,status} = product; return (<span><Button type='primary' onClick={()=>this.updateStatus(_id,status)}>{status==1?'下架':'上架'}</Button><span>{status==1?'在售':'已下架'}</span></span>)}
              },
             {
                title: '操作',
                width:200,
                key: 'operation',
                // 将行数据对象使用state传递给目标路由组件
                render:(product)=>{return (<span><LinkButton onClick={()=>this.props.history.push('/index/product/detail',product)}>详情</LinkButton><LinkButton onClick={()=>this.props.history.push('/index/product/addUpdate',product)}>修改</LinkButton></span>)}
             },
          ]
    }
    /*
        获取指定页码的列表数据显示
    */
    getProducts=async (pageNum)=>{
        this.pageNum = pageNum
        this.setState({loading:true})
        const {searchContent,searchType} = this.state
            // 如果搜索关键字有值 执行搜索分页
        let result
        if(searchContent){
            result = await searchProducts({searchContent,pageNum,pageSize:PAGE_SIZE,searchType})
        }else{
            // 一般查询分页
            result = await reqProducts(pageNum, PAGE_SIZE)
        }
        this.setState({loading:false})
        if(result.status===0){
            this.setState({
                total:result.data.total,
                products:result.data.list 
            })
            
        }
    }
    updateStatus=async (productId, status)=>{
        const result = await reqUpdateStatus(productId,status===2?1:2)
        if(result.status==0){
            message.success('更新商品成功')
            //获取当前页面重新请求数据
            this.getProducts(this.pageNum)
        }
    }
    componentDidMount(){
        this.getProducts(1)
    }

    UNSAFE_componentWillMount(){
        this.initColumns()
    }   
    render() {
        const {total,products,loading,searchContent,searchType} = this.state
        const title = (
            <span>
                <Select value={searchType} onChange={value=>{this.setState({searchType:value})}} style={{width:150}}>
                    <Select.Option value='productName'>按名称搜索</Select.Option>
                    <Select.Option value='productDesc'>按描述搜索</Select.Option>
                </Select>
                <Input placeholder='关键字' value={searchContent} onChange={event=>{this.setState({searchContent:event.target.value})}} style={{width:150,margin:'0 15px'}} />
                <Button onClick={()=>{this.getProducts(1)}} type='primary'>搜索</Button>
            </span>
            
        )
        const extra= (
                <Button onClick={()=>this.props.history.push('/index/product/addupdate')} type='primary' icon={<PlusOutlined/>} >
                    添加商品
                </Button>
        )
        return (
             <Card extra={extra} title={title}>
                <Table loading={loading} dataSource={products} columns={this.columns} pagination={{total,defaultPageSize:PAGE_SIZE,current:this.pageNum,showQuickJumper:true,onChange:this.getProducts}} bordered rowKey='_id'>

                </Table>
             </Card>
        )
    }
}
